<template>
  <div class="mobiellogin">
    <section>
      <div class="mobiellogin_hader">
        <div class="left"></div>
        <div class="right">
          <span>已有账号,</span>
          <span>
            <router-link to="/password">
              马上登陆
            </router-link>
            </span>
          <span>|</span>
          <span @click="handleRegister">
              注册
          </span>
        </div>
      </div>
      <div class="step">
       <div class="step_item">
          <img v-if="active==0" src="@/assets/images/100@2x.png" />
          <img v-else src="@/assets/images/101@2x.png" />
          <span :style="{color:active===0 ? '#fff':'rgba(78,92,101,1)'}">找回密码</span>
        </div>
        <div class="step_item">
          <img v-if="active==1" src="@/assets/images/102@2x.png" />
          <img v-else src="@/assets/images/103@2x.png" />
          <span :style="{color:active===1 ? '#fff':'rgba(78,92,101,1)'}">重置密码</span>
        </div>
        <div class="step_item">
          <img v-if="active==2" src="@/assets/images/104.png" />
          <img v-else src="@/assets/images/105@2x.png" />
          <span :style="{color:active===2 ? '#fff':'rgba(78,92,101,1)'}">重置完成</span>
        </div>
      </div>
      <div class="content">
        <div v-if="active===0" style="width:4.32rem">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="user">
              <el-row class="user" type="flex" align="middle" justify="space-between">
                <el-input v-model="ruleForm.user" placeholder="请输入手机号"></el-input>
                <div v-if="ruleForm.user" class="clear" @click="ruleForm.user=''"></div>
              </el-row>
            </el-form-item>
            <el-form-item prop="code">
              <el-row class="password" type="flex" justify="space-between" align="middle">
                <el-input style="width:2.3rem" v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
                <div v-if="ruleForm.code" class="clear" @click="ruleForm.code=''"></div>
                <div :style="{opacity:codeStaus}" v-if="timer===60" class="rcode" @click="handleCode">
                  获取验证码
                </div>
                <div :style="{opacity:codeStaus}" v-else class="rcode">
                  重新获取{{(timer)}}}
                </div>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row type="flex" justify="space-between">
                <div :style="{opacity:submitStaus}" class="submit" @click="submitStep('ruleForm')">下一步</div>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="active===1 && ruleForm.user" style="width:4.32rem">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="pass">
              <el-row class="user" type="flex" align="middle">
                <el-input type="password" v-model="ruleForm.pass" placeholder="请输入密码"></el-input>
                <div v-if="ruleForm.pass" class="clear" @click="ruleForm.pass=''"></div>
              </el-row>
            </el-form-item>
            <el-form-item prop="password">
              <el-row class="password" type="flex" justify="space-between" align="middle">
                <el-input type="password" v-model="ruleForm.password" placeholder="确认密码"></el-input>
                <div v-if="ruleForm.password" class="clear" @click="ruleForm.password=''"></div>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row type="flex" justify="space-between">
                <div :style="{opacity:ruleForm.password && ruleForm.pass?1:0.5}" class="submit" @click="submit('ruleForm')">下一步</div>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="active===2" style="width:4.32rem" class="success">
          <div class="success"></div>
          <div class="title">重置完成</div>
          <span>您已成功重置密码，请试用新密码登录</span>
          <div :style="{opacity:1}" class="submit" @click="$router.push('/password')">马上登陆</div>
        </div>
      </div>
    </section>
    <jblFooter/>
  </div>
</template>

<script>
import md5 from 'js-md5'
import jblFooter from '@/views/login/compoents/jblFooter'
import { sendCode, setPassword } from '@/api/user'
import { veryCode } from '@/api/common'
export default {
  name: 'SeekPassword',
  components: {
    jblFooter
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!(/^1[3456789]\d{9}$/.test(value))) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      active: 0,
      stepData: [
        {
          name: '找回密码'
        },
        {
          name: '重置密码'
        },
        {
          name: '重置完成'
        }
      ],
      timer: 60,
      ruleForm: {
        user: '',
        code: '',
        pass: null,
        password: null
      },
      rules: {
        user: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
        ],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      }
    }
  },
  watch: {
  },
  computed: {
    codeStaus() {
      return this.ruleForm.user.length===11 ? 1 : 0.5
    },
    submitStaus() {
      return this.ruleForm.user && this.ruleForm.code ? 1 : 0.5
    }
  },
  beforeRouteLeave(to, form, next) {
    next()
  },
  methods: {
    handleCode() {
      this.$refs.ruleForm.validateField('user', (err) => {
        if (err) {
          return false
        } else {
          this.timer = 59
          const time = setInterval(() => {
            this.timer--
            if (this.timer <= 0) {
              clearInterval(time)
              this.timer = 60
            }
          }, 1000)
          sendCode({ 'phone': this.ruleForm.user }).then(res => {
            this.$message({
              message: '验证码发送成功',
              type: 'success'
            })
          })
        }
      })
    },
    submitStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          veryCode({
            'phone': this.ruleForm.user,
            'code': this.ruleForm.code
          }).then(res => {
            this.active = 1
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          setPassword({
            'phone': this.ruleForm.user,
            'password': md5(this.ruleForm.password),
            'code': this.ruleForm.code
          }).then(res => {
            this.active = 2
          })
        } else {
          return false
        }
      })
    },
    handleRegister() {
      this.$store.dispatch('user/resetToken')
      this.$router.push('/register')
    },
    toScanning() {
      this.isScanning = true
    }
  }
}
</script>
<style lang="scss" scoped>
  .mobiellogin{
    width: 100%;
    min-width: 1000px;
    height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    background:rgba(247,248,252,1);
    opacity:1;
    section{
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
    }
    &_hader{
      margin: .8rem 0 .3rem;
      width:12rem;
      display:flex;
      justify-content:space-between;
      align-items: flex-end;
      .left{
        width: 2.20rem;
        height: .44rem;
        background-image: url('../../../assets/images/jbllogo.png');
        background-size: 100% 100%;
        background-position: center;
      }
      .right{
        font-size:.18rem;
        font-family:PingFang SC;
        font-weight:400;
        color:#B3B9C7;
        opacity:1;
        span:nth-of-type(2){
          cursor: pointer;
          color: #41B3FF;
        }
        span:last-child{
          cursor: pointer;
        }
        span:nth-of-type(3){
          margin: 0 .3rem;
        }
      }
    }
    .step{
      display: flex;
      justify-content: space-between;
      &_item{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3.89rem;
        height: 1rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:600;
        line-height:.33rem;
        color:rgba(78,92,101,1);
        >img{
          width: 3.89rem;
          height: 1rem;
        }
        >span{
          position: absolute;
        }
      }
    }
    .content{
      margin-top: .3rem;
      display:flex;
      justify-content:center;
      align-items: center;
      width:12rem;
      height:5.54rem;
      background:rgba(255,255,255,1);
      opacity:1;
      border-radius:10px;
       .user{
        width:4.32rem;
        height:.70rem;
        background:rgba(247,248,252,1);
        opacity:1;
        border-radius:8px;

      }
      .password{
        width:4.32rem;
        height:.70rem;
        background:rgba(247,248,252,1);
        opacity:1;
        border-radius:8px;
        .rcode{
          cursor: pointer;
          margin-right: .08rem;
          display: flex;
          justify-content: center;
          align-items: center;
          width:1.40rem;
          height:.54rem;
          font-size:.16rem;
          font-family:PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          background:#16DBCC;
          opacity:0.5;
          border-radius:6px;
        }
      }
      .clear{
        cursor: pointer;
        margin-right: .20rem;
        width: .24rem;
        height: .24rem;
        background-image: url('../../../assets/images/组 19@2x.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .success{
        display:flex;
        flex-flow: column;
        justify-content:center;
        align-items: center;
        .success{
          margin-bottom: .32rem;
          width: 1rem;
          height: 1rem;
          background-image: url('../../../assets/images/组 3386@2x.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;
        }
        .title{
          font-size:.36rem;
          font-family:PingFang SC;
          font-weight:600;
          color:rgba(78,92,101,1);
          opacity:1;
        }
        >span{
          margin: .20rem 0 .8rem;
          font-size:.20rem;
          font-family:PingFang SC;
          font-weight:400;
          color:rgba(148,157,162,1);
          opacity:1;
        }
      }
      .submit{
        cursor: pointer;
        display:flex;
        justify-content:center;
        align-items: center;
        width:4.32rem;
        height:.7rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        background:rgba(22,219,204,1);
        box-shadow:0px 10px 25px rgba(22,219,204,0.15);
        opacity:1;
        border-radius:8px;
        transition: all .7s;
      }
    }
    /deep/.el-input{
      width: 90%;
    }
    /deep/.el-input__inner{
        height:.70rem;
        font-size:.24rem;
        font-family:SF UI Display;
        font-weight:bold;
        color:rgba(78,92,101,1);
        background:rgba(247,248,252,1);
        opacity:1;
        border:none;
        border-radius:8px;
        &::-webkit-input-placeholder {
        /* WebKit browsers */
          font-size:.20rem;
          font-family:PingFang SC;
          font-weight:400;
          color:rgba(217,220,227,1);
        }
      }
  }
</style>
